<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const activeName = ref('1')
const router = useRouter()

const goToPayment = () => {
  router.push('/payment')
}
</script>

<template>
  <div
    class="w-full h-12vw bg-blue-500 text-white text-4.8vw fixed left-0 top-0 z-1000 flex justify-center items-center">
    我的订单
  </div>


  <div class="p-4">
    <div class="flex flex-row justify-between items-center">
      <div class="p-4 text-gray-500 text-xl">
        未支付订单信息：
      </div>
      <div class="bg-orange-500 text-white" @click="goToPayment">去支付</div>
    </div>

    <div class="demo-collapse">
      <el-collapse v-model="activeName" accordion="true">
        <el-collapse-item title="万家饺子馆" name="1">
          <div class="flex flex-row justify-between text-sm">
            <div>纯肉鲜肉（水饺）*2</div>
            <div>￥15</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>玉米鲜肉（水饺）*1</div>
            <div>￥16</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>配送费</div>
            <div>￥3</div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="小锅饭豆腐馆" name="2">
          <div class="flex flex-row justify-between text-sm">
            <div>纯肉鲜肉（水饺）*2</div>
            <div>￥15</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>玉米鲜肉（水饺）*1</div>
            <div>￥16</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>配送费</div>
            <div>￥3</div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <el-divider />

    <div class="p-4 text-gray-500 text-xl">
      已支付订单信息：
    </div>
    <div class="demo-collapse">
      <el-collapse v-model="activeName" accordion="true">
        <el-collapse-item title="万家饺子馆" name="3">
          <div class="flex flex-row justify-between text-sm">
            <div>纯肉鲜肉（水饺）*2</div>
            <div>￥15</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>玉米鲜肉（水饺）*1</div>
            <div>￥16</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>配送费</div>
            <div>￥3</div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="小锅饭豆腐馆" name="4">
          <div class="flex flex-row justify-between text-sm">
            <div>纯肉鲜肉（水饺）*2</div>
            <div>￥15</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>玉米鲜肉（水饺）*1</div>
            <div>￥16</div>
          </div>
          <div class="flex flex-row justify-between text-sm">
            <div>配送费</div>
            <div>￥3</div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

  </div>
</template>
